<template>
  <div class="record">
    <div class="search-panel">
      <el-form :inline="true" :model="form" @submit.native.prevent>
        <el-form-item>
          <el-select
            v-model="form.equipCode"
            filterable 
            clearable
            placeholder="请选择设备">
            <el-option
              v-for="item in equipList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.startTime"
            type="date"
            style="width:140px"
            :picker-options="pickerOptions"
            placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.endTime"
            type="date"
            style="width:140px"
            :picker-options="pickerOptions"
            placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div> 
    <main-table
      ref="table"
      :loading="loading"
      :pageTotal="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :data="list"
      :columns="columns"
      :currentPage.sync="pageNum"
      :columnType="columnType"
      border>
    </main-table>
  </div>
</template>

<script>
export default {
  props: {
    pointCode: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      list: [],
      pageTotal: 0,
      loading: false,
      columnType: ['index'],
      columns: [
        { label: '质控类型', prop: 'dataTypeName' },
        { label: '核查时间', prop: 'dataTime' },
        { label: '标液浓度', prop: 'dataValue' },
        { label: '核查浓度', prop: 'dataCheck' },
        { label: '核查结果', prop: 'qualified' }
      ],
      multipleSelection: [],
      equipList: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      form: {
        equipCode: '',
        startTime: '',
        endTime: ''
      }
    };
  },
  watch: {
    pointCode: {
      handler(skin) {
        this.getEquipList();
      },
      immediate: true
    }
  },
  created() {
    this.form.startTime = this.$moment().startOf('month').format('YYYY-MM-DD');
    this.form.endTime = this.$moment().endOf('day').format('YYYY-MM-DD');
  },
  methods: {
    search() {
      this.getDataList();
    },
    getEquipList() {
      const params = {
        url: `/api/ems/equip/list?pointCode=${this.pointCode}`,
        type: 'post',
        params: {
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.equipList = rows.map(item => {
            return {
              label: item.equipName,
              value: item.equipCode
            };
          });
        }
      });
    },
    getDataList() {
      const params = {
        url: `/api/ems/equip/checkData/page`,
        type: 'post',
        params: {
          equipCode: this.form.equipCode,
          pointCode: this.pointCode,
          startTime: this.form.startTime ? this.form.startTime + ' 00:00:00' : '',
          endTime: this.form.endTime ? this.form.endTime + ' 23:59:59' : ''
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        console.log(`当前页: ${val}`, val);
        this.pageNum = val;
        this.getDataList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.record{

}
</style>